<template>
	<view class="container">
		<uni-section class="uni-section" title="我注册的主机" type="circle"></uni-section>
		<view class="">
			<uni-group :title="'NO' +(index +1) +'--'+ item.are+ ':'+ item.customAre" mode="card"
				v-for="(item,index) in hostList" :key="index">
				<view>

				</view>
				<view class="example-body">
					<uni-row class="demo-uni-row">
						<uni-col :span="12">
							<view class="demo-uni-col dark">id:</view>
						</uni-col>
						<uni-col :span="12">
							<view class="demo-uni-col light">{{item.id}}</view>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="12">
							<view class="demo-uni-col dark">ip:</view>
						</uni-col>
						<uni-col :span="12">
							<view class="demo-uni-col light">{{item.ip}}</view>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="12">
							<view class="demo-uni-col dark">园区:</view>
						</uni-col>
						<uni-col :span="12">
							<view class="demo-uni-col light">{{item.are}}</view>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="12">
							<view class="demo-uni-col dark">区域编号:</view>
						</uni-col>
						<uni-col :span="12">
							<view class="demo-uni-col light">{{item.customAre}}</view>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="12">
							<view class="demo-uni-col dark">厂家:</view>
						</uni-col>
						<uni-col :span="12">
							<view class="demo-uni-col light">{{item.factoryOwner}}</view>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="12">
							<view class="demo-uni-col dark">主机系统:</view>
						</uni-col>
						<uni-col :span="12">
							<view class="demo-uni-col light">{{item.projectName}}</view>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="12">
							<view class="demo-uni-col dark">变频器型号:</view>
						</uni-col>
						<uni-col :span="12">
							<view class="demo-uni-col light">{{item.converter}}</view>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="12">
							<view class="demo-uni-col dark">电机型号:</view>
						</uni-col>
						<uni-col :span="12">
							<view class="demo-uni-col light">{{item.electricalMachinery}}</view>
						</uni-col>
					</uni-row>

					<uni-row class="demo-uni-row">
						<uni-col :span="12">
							<view class="demo-uni-col dark">触摸屏型号:</view>
						</uni-col>
						<uni-col :span="12">
							<view class="demo-uni-col light">{{item.hmi}}</view>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="12">
							<view class="demo-uni-col dark">主机状态:</view>
						</uni-col>

						<uni-col :span="12">
							<view v-if="item.status === 1" class="demo-uni-col light">正常</view>
							<view v-else-if="item.status === 2" class="demo-uni-col light">维护</view>
							<view v-else-if="item.status === 3" class="demo-uni-col light">废弃</view>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="12">
							<view class="demo-uni-col dark">添加时间:</view>
						</uni-col>
						<uni-col :span="12">
							<view class="demo-uni-col light">{{item.createTime}}</view>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="12">
							<view class="demo-uni-col dark">添加人:</view>
						</uni-col>
						<uni-col :span="12">
							<view class="demo-uni-col light">{{item.createBy}}</view>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="12">
							<view class="demo-uni-col dark">其他信息:</view>
						</uni-col>
						<uni-col :span="12">
							<view class="demo-uni-col light">{{item.otherDesc}}</view>
						</uni-col>
					</uni-row>
				</view>

			</uni-group>
		</view>

	</view>
</template>

<script>
	import api from "../../api/api.js"

	export default {
		data() {
			return {
				hostList: [],
				count: 0,
				column: 2
			}
		},
		onLoad() {
			this.getUserHostList();

		},
		onPullDownRefresh() {
			this.getUserHostList();
			uni.stopPullDownRefresh();
		},
		methods: {
			getUserHostList() {
				uni.getStorage({
					key: api.base.userInfo,
					success: key => {
						api.getAllHost(key.data).then(res => {
							
							this.hostList = res.data;
							uni.setStorage({
								data:this.hostList,
								key:api.base.userHostList,
								success() {
									// console.log("保存用户主机信息成功",res)
								}
							})
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.demo-uni-row {
		margin: 5rpx;
		// 组件在小程序端display为inline
		// QQ、抖音小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	// 支付宝小程序没有 demo-uni-row 层级
	// 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	::v-deep .uni-row {
		margin-bottom: 10px;
	}
	/* #endif */

	.dark_deep {
		background-color: #99a9bf;
	}

	.dark {
		background-color: #d3dce6;
	}

	.light {
		background-color: #e5e9f2;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0rpx 5rpx 0;
		overflow: hidden;
		font-size: 5rpx;
	}
</style>